<template>
  <view @touchstart="handleTouchstart" @touchend="handleTouchend">
    <slot></slot>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        startTime:0,
        startX:0,
        startY:0
      }
    },
    methods: {
      handleTouchstart(e){
        this.startTime=Date.now()
        this.startX=e.changedTouches[0].clientX
        this.startY=e.changedTouches[0].clientY
      },
      handleTouchend(e){
        const endTime=Date.now()
        const endX=e.changedTouches[0].clientX
        const endY=e.changedTouches[0].clientY
        let direction=''
        //判断时间合法
        if (endTime-this.startTime>2000) {
          return
        }
        //判断距离坐标合法
        if (Math.abs(endY-this.startY)<10&&Math.abs(endX-this.startX)>10) {
          direction=endX-this.startX>0?'right':'left'
        }else{
          return
        }
        //向父组件传递数据
        this.$emit('swiperAction',{direction})
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>